<!DOCTYPE html>
<html>
<head>
	<title>邀请得课</title>
	<link rel="stylesheet" type="text/css" href="./statics/style/public.css">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style type="text/css">
		.invitation {
			width: 100%;
			min-height: 642px;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.invitation .banner {
			width: 375px;
			height: 200px;
		}
		.invitation .cardDesc {
			width: 335px;
			height: 166px;
			text-align: center;
			background: url("./statics/img/invite/card.png") no-repeat center;
			margin-top: -25px;
			display: flex;
			align-items: center;
			flex-direction: column;
			color: #42323d;
			justify-content: space-evenly;
		}
		.cardDesc p {
			margin: 0;
			font-size: 18px;
			height: 18px;
			font-size: bold;
		}
		.cardDesc .demands {
			font-size: 9px;
			line-height: 12px;
			height: 16px;
			font-size: normal;
		}
		.cardDesc .demands span {
			font-size: 16px;
		}
		.cardDesc .splitLine {
			width: 100%;
			margin: 0;
			border: none;
			border-bottom: 1px solid #fff;
		}
		.cardDesc a {
			color: #42323d;
		}
		.courseChoice {
			padding: 30px 29px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.title {
			width: 100%;
			text-align: left;
			background: url("./statics/img/invite/front.png") no-repeat left center;
			padding-left: 9px;
			height: 17px;
			line-height: 17px;
			margin: 0;
		}
		.courseChoice .images {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			flex-wrap: wrap;
			margin-top: 28px;
		}
		.courseChoice .images img {
			margin-bottom: 20px;
			width: 81px;
			height: 71px;
		}
		.invitation .inviteBtns {
			margin-top: 6px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.inviteBtns button {
			width: 84px;
			height: 30px;
			border: none;
		}
		.message {
			background: url("./statics/img/invite/btnMessage.png") no-repeat center;
			background-size: 80px 30px;
		}
		.wechat {
			background: url("./statics/img/invite/btnWechat.png") no-repeat center;
			color: #fff;
			background-size: 80px 30px;
		}
		.invited {
			height: 285px;
			margin-top: 7px;
			padding: 30px 14px;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.invited .subscribes {
			width: 328px;
			height: 180px;
			background-color: #fff6d7;
			border-radius: 3px;
			margin-top: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow-y: auto;
		}
		.invited .subscribes .subscribe {
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		@media screen and (min-width: 400px) {
			.invitation .banner {
				width: 100%;
				height: 400px;
			}
			.courseChoice .images img {
				width: 30%;
				height: 120px;
			}
			.inviteBtns button {
				width: 125px;
				height: 45px;
			}
			.message , .wechat {
				background-size: 125px 45px;
			}
			.invited .subscribes {
				width: 87%;
			}
		}
	</style>
</head>
<body>
	<div class="mainContent">
		<div class="invitation">
			<img src="./statics/img/invite/banner.png" class="banner">
			<div class="cardDesc">
				<p class="demands"><span>微信或短信</span>邀请<span>50名</span>好友关注</p>
				<p>免费课程任你学</p>
				<hr class="splitLine">
				<a href="">了解详情</a>
			</div>
			<div class="courseChoice">
				<p class="title">选择你感兴趣的课程</p>
				<div class="images">
					<img src="./statics/img/invite/course1.png">
					<img src="./statics/img/invite/course1.png">
					<img src="./statics/img/invite/course1.png">
					<img src="./statics/img/invite/course1.png">
					<img src="./statics/img/invite/course1.png">
					<img src="./statics/img/invite/course1.png">
				</div>
				<div class="inviteBtns">
					<button class="wechat">微信邀请</button>
					<button class="message">短信邀请</button>
				</div>
			</div>
		</div>
		<div class="invited">
			<p class="title">我的邀请</p>
			<div class="subscribes">
				<div class="subscribe">
					<img src="./statics/img/invite/avator.png">
					<span>就算了</span>
					<span>2018-05-05</span>
					<span>微信邀请</span>
				</div>
			</div>
		</div>
	</div>
</body>
</html>